﻿@{
    ViewBag.Title = "Index";
}

<h2>使用jquery模版加载页面</h2>
<br />
jquery模版绑定参考: <a href="https://gitee.com/sundayisblue/jquery-tmpl" target="_blank">https://gitee.com/sundayisblue/jquery-tmpl</a>
<br />
<br />
<div>
    <table width="1000px" id="infoDiv">
        <tr>
            <td>行号</td>
            <td>标题</td>
            <td>内容</td>
            <td>年龄</td>
            <td>年龄 +1 </td>
            <td>标签</td>
            <td>标签2</td>
        </tr>
    </table>
</div>

<style>.redclass {color: red}</style>


@section scripts
{
    <script src="~/Scripts/jquery.tmpl.min.js"></script>
    <script>
        $(function() {
            showInfo();
        });

        function showInfo() {

            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetData")',
                async: false,
                contentType: "application/json",
                dataType: "json",
                success: function(res) {
                    $("#infoDiv").append($("#infoTemplate").tmpl(res));
                }
            });

        }
    </script>

    <script id="infoTemplate" type="text/x-jquery-tmpl">
        {{if Age%2==0}}
        <tr class="redclass">
        {{else}}
        <tr>
        {{/if}}
            <td>${$index+1}</td>
            <td>${Title}</td>
            <td>${Info}</td>
            <td>${Age}</td>
            <td>${Age+1}</td>
            <td>
                {{each(i,tab) Tabs}}
                ${i+1} ${tab} ;
                {{/each}}
            </td>
            <td>
                {{each TabStrings.split(',')}}
                ${$index} ${TabStrings.split(',')[$index]} (${$value});
                {{/each}}
            </td>
        </tr>
    </script>
}
